<!DOCTYPE html>
<html lang='en'>
<head>
    <meta charset='UTF-8'>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.13.0/css/all.css">
    <link href="https://fonts.googleapis.com/css2?family=Arimo&family=Bebas+Neue&family=Inconsolata&display=swap" rel="stylesheet">
    <title>Redeye Record</title>
    <link rel="stylesheet" href="redeye.css">
    <script src="redeye.js"></script>
</head>

<body>

    <header>
        <!-- the first block of the website -->
        <section id='titles'>
            <h2><a href='index.html'>REDEYE</a></h2>
            <h3>DANCE MUSIC SPECIALISTS SINCE 1992
                <span id='hamburger' onclick="showHide('menu')">
                    <a href="javascript:void(0);"><i class="fa fa-bars"></i></a>   
                </span>
            </h3>
        </section>

        <nav id='menu'>
            <ul>
                <li><a href='contact.html'>CONTACT</a></li>
                <li><a href='support.html'>SUPPORT</a></li>
                <li><a href='aboutus.html'>ABOUT US</a></li>
                <li><a href=''>MY ACCOUNT</a></li>
                <li><a href=''><i class='fa fa-search'></i></a></li>
                <li><a href='cart.html'><i class="fas fa-shopping-cart"></i></a></li>
            </ul>
        </nav>
    </header>

    <main>
        <!-- The navigation bar -->
        <section class="navigation-wrap" >
            <ul class='navigation'>
                <li><a href="">All</a></li>
                <li><a href="">Genre<i class="fas fa-caret-down"></i></a></li>
                <li><a href="">New Release<i class="fas fa-caret-down"></i></a></li>
                <li><a href="">Sale<i class="fas fa-caret-down"></i></a></li>
                <li class='last-item'><a href="">Pre-orders<i class="fas fa-caret-down"></i></a></li>
            </ul>
        </section>
        
        <!-- Splash image with advert -->
        <section class='splash'>
            <h1>Record Sales</h1>
            <div class='discount'>Get 20% Off Your First Order</div>
            <p>More than 10,000 new records every week.<br>
                Join our weekly new releases mailer and get 20% off your first order.</p>
            <button class='signup'>SIGN UP HERE</button>
            <div class='explore'><a href='all.html'>Start Exploring</a></div>
        </section>

        <!-- news -->
        <article class='container news p1'>
            <h4 class="px3">News</h4>
            <div class='news-info flex flex-wrap'>
                <div class='px3 flex-1 flex-100'>
                    <img src='images/band.jpg' alt='band' class='responsive'>
                    <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Bibendum est ultricies integer quis. </p>
                    <p class='dig'>Dig in-></p>
                </div>
                <div class='px3 flex-1 flex-100'>
                    <img src='images/studio.jpg' alt='studio' class='responsive'>
                    <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do labore et dolore magna aliqua. Bibendum est ultricies integer quis. Iaculis urna id</p>
                    <p class='dig'>Dig in-></p>
                </div>
            </div>
        </article>

        <!-- music -->
        <article class='container bass-music p1'>
            <h4 class="px3">Bass Music</h4>
            <hr>
            <p class='see-all'>See All Bass Music>></p>
            <ul class='flex-box flex-wrap'>
                <li class='wrap-product flex-1 flex-100 p1'>
                    <img src='images/1.jpg'  class='product'>
                    <h6>TBQFH EP</h6>
                    <div class='flex-box'>
                        <section>
                        <div class='artist'>96 Back</div>
                            <h6>$26</h6>
                        </section>
                        <section>
                            <a href="cart.html" class='add-to-cart'>Add to Cart</a>
                        </section>
                    </div>
                </li>
                <li class='wrap-product flex-1 flex-100 p1 pc'>
                    <img src='images/2.jpg'  class='product'>
                    <h6>INSRINCT 12</h6>
                    <div class='flex-box'>
                        <section>
                            <div class='artist'>Instinct</div>
                            <h6>$26</h6>
                        </section>
                        <section>
                            <a href="cart.html" class='add-to-cart'>Add to Cart</a>
                        </section>
                    </div>
                </li>
                <li class='wrap-product flex-1 flex-100 p1 pc'>
                <img src='images/3.jpg'  class='product'>
                <h6>Sarky EP</h6>
                <div class='flex-box'>
                    <section>   
                    <div class='artist'>Harry Wills</div>
                        <h6>$26</h6>
                    </section>
                    <section>
                        <a  href="cart.html" class='add-to-cart'>Add to Cart</a>
                    </section>
                </div>
                </li>
            </ul>
        </article>

        <article class='container bass-music p1'>
            <h4 class="px3">Funk · Hip-Pop · Soul</h4>
            <hr>
            <p class='see-all'>See All Funk · Hip-Pop · Soul>></p>
            <ul class='flex-box flex-wrap'>
                <li class='wrap-product flex-1 flex-100 p1'>
                    <img src='images/4.jpg'  class='product'>
                    <h6>GLADES</h6>
                    <div class='flex-box'>
                        <section>
                        <div class='artist'>Vanessa Kendrick</div>
                            <h6>$49</h6>
                        </section>
                        <section>
                            <a href="cart.html" class='add-to-cart'>Add to Cart</a>
                        </section>
                    </div>
                </li>
                <li class='wrap-product flex-1 flex-100 p1 pc'>
                    <img src='images/5.jpg'  class='product'>
                    <h6>Toxic Funk</h6>
                    <div class='flex-box'>
                        <section>
                            <div class='artist'>Gramophone Soul</div>
                            <h6>$57</h6>
                        </section>
                        <section>
                            <a href="cart.html" class='add-to-cart'>Add to Cart</a>
                        </section>
                    </div>
                </li>
                <li class='wrap-product flex-1 flex-100 p1 pc'>
                <img src='images/6.jpg'  class='product'>
                <h6>MUKATSUKU</h6>
                <div class='flex-box'>
                    <section>   
                    <div class='artist'>Pat Thomas</div>
                        <h6>$92</h6>
                    </section>
                    <section>
                        <a  href="cart.html" class='add-to-cart'>Add to Cart</a>
                    </section>
                </div>
                </li>
            </ul>
        </article>

        <article class='container bass-music p1'>
            <h4 class="px3"> D & B · Jungle   </h4>
            <hr>
            <p class='see-all'>See All  D & B · Jungle>></p>
            <ul class='flex-box flex-wrap'>
                <li class='wrap-product flex-1 flex-100 p1'>
                    <img src='images/7.jpg'  class='product'>
                    <h6>ILL BEHAVIOUR</h6>
                    <div class='flex-box'>
                        <section>
                        <div class='artist'>Unknown</div>
                            <h6>$49</h6>
                        </section>
                        <section>
                            <a href="cart.html" class='add-to-cart'>Add to Cart</a>
                        </section>
                    </div>
                </li>
                <li class='wrap-product flex-1 flex-100 p1 pc'>
                    <img src='images/8.jpg'  class='product'>
                    <h6>Stompinchoonz</h6>
                    <div class='flex-box'>
                        <section>
                            <div class='artist'>J. D. S</div>
                            <h6>$57</h6>
                        </section>
                        <section>
                            <a href="cart.html" class='add-to-cart'>Add to Cart</a>
                        </section>
                    </div>
                </li>
                <li class='wrap-product flex-1 flex-100 p1 pc'>
                <img src='images/9.jpg'  class='product'>
                <h6>U CAN C IN THERE</h6>
                <div class='flex-box'>
                    <section>   
                    <div class='artist'>Coco Bryce</div>
                        <h6>$92</h6>
                    </section>
                    <section>
                        <a  href="cart.html" class='add-to-cart'>Add to Cart</a>
                    </section>
                </div>
                </li>
            </ul>
        </article>

        <article class='container bass-music p1'>
            <h4 class="px3">House · Disco</h4>
            <hr>
            <p class='see-all'>See All House · Disco   >></p>
            <ul class='flex-box flex-wrap'>
                <li class='wrap-product flex-1 flex-100 p1'>
                    <img src='images/10.jpg'  class='product'>
                    <h6>EMPLOYEE EP</h6>
                    <div class='flex-box'>
                        <section>
                        <div class='artist'>BAKKED</div>
                            <h6>$49</h6>
                        </section>
                        <section>
                            <a href="cart.html" class='add-to-cart'>Add to Cart</a>
                        </section>
                    </div>
                </li>
                <li class='wrap-product flex-1 flex-100 p1 pc'>
                    <img src='images/11.jpg'  class='product'>
                    <h6>Magou</h6>
                    <div class='flex-box'>
                        <section>
                            <div class='artist'>La Mosca</div>
                            <h6>$57</h6>
                        </section>
                        <section>
                            <a href="cart.html" class='add-to-cart'>Add to Cart</a>
                        </section>
                    </div>
                </li>
                <li class='wrap-product flex-1 flex-100 p1 pc'>
                <img src='images/12.jpg'  class='product'>
                <h6>CHTEAU ROUGE EP</h6>
                <div class='flex-box'>
                    <section>   
                    <div class='artist'>Mario Penati</div>
                        <h6>$92</h6>
                    </section>
                    <section>
                        <a  href="cart.html" class='add-to-cart'>Add to Cart</a>
                    </section>
                </div>
                </li>
            </ul>
        </article>

        <article class='container bass-music p1'>
            <h4 class="px3">Reggae</h4>
            <hr>
            <p class='see-all'>See All Reggae   >></p>
            <ul class='flex-box flex-wrap'>
                <li class='wrap-product flex-1 flex-100 p1'>
                    <img src='images/13.jpg'  class='product'>
                    <h6>DOUBLE TALK</h6>
                    <div class='flex-box'>
                        <section>
                        <div class='artist'>Red Cloud</div>
                            <h6>$49</h6>
                        </section>
                        <section>
                            <a href="cart.html" class='add-to-cart'>Add to Cart</a>
                        </section>
                    </div>
                </li>
                <li class='wrap-product flex-1 flex-100 p1 pc'>
                    <img src='images/14.jpg'  class='product'>
                    <h6>I AM THAT I AM</h6>
                    <div class='flex-box'>
                        <section>
                            <div class='artist'>Jamaiel Shabaka</div>
                            <h6>$57</h6>
                        </section>
                        <section>
                            <a href="cart.html" class='add-to-cart'>Add to Cart</a>
                        </section>
                    </div>
                </li>
                <li class='wrap-product flex-1 flex-100 p1 pc'>
                <img src='images/15.jpg'  class='product'>
                <h6>IN A CRISIS</h6>
                <div class='flex-box'>
                    <section>   
                    <div class='artist'>Eva Keyes</div>
                        <h6>$92</h6>
                    </section>
                    <section>
                        <a  href="cart.html" class='add-to-cart'>Add to Cart</a>
                    </section>
                </div>
                </li>
            </ul>
        </article>

        <article class='container bass-music p1'>
            <h4 class="px3">Techno · Electro</h4>
            <hr>
            <p class='see-all'>See All Techno · Electro   >></p>
            <ul class='flex-box flex-wrap'>
                <li class='wrap-product flex-1 flex-100 p1'>
                    <img src='images/16.jpg'  class='product'>
                    <h6>ATOM & TOBIAS</h6>
                    <div class='flex-box'>
                        <section>
                        <div class='artist'>Red Cloud</div>
                            <h6>$49</h6>
                        </section>
                        <section>
                            <a href="cart.html" class='add-to-cart'>Add to Cart</a>
                        </section>
                    </div>
                </li>
                <li class='wrap-product flex-1 flex-100 p1 pc'>
                    <img src='images/17.jpg'  class='product'>
                    <h6>SKEE MASK</h6>
                    <div class='flex-box'>
                        <section>
                            <div class='artist'>It Danza</div>
                            <h6>$57</h6>
                        </section>
                        <section>
                            <a href="cart.html" class='add-to-cart'>Add to Cart</a>
                        </section>
                    </div>
                </li>
                <li class='wrap-product flex-1 flex-100 p1 pc'>
                <img src='images/18.jpg'  class='product'>
                <h6>CALL ME</h6>
                <div class='flex-box'>
                    <section>   
                    <div class='artist'>Bileebob</div>
                        <h6>$92</h6>
                    </section>
                    <section>
                        <a  href="cart.html" class='add-to-cart'>Add to Cart</a>
                    </section>
                </div>
                </li>
            </ul>
        </article>
    </main>

    
    <footer>
        <div class="container flex flex-wrap">
            <section class='words flex-1 flex-100'>
                <address>
                    Redeye Records Ltd., Unit 5,<br>
                    Cristal Business Centre, Knightsdale Rd,<br>
                    Ipswich IP1 4JJ<br>
                </address>
                <br><br>
                <strong>Copyright 2020 Redeye Record. A website by Eq.</strong>
            </section>
            <br>
            <section class='socials flex-1 flex-100'>
                <strong>Stay In Touch<strong>
                     <form action=''>
                         <input class="email" type="text" placeholder="Email Address">
                         <label class="email" for="email"><i class="fas fa-arrow-right"></i></label>
                         <br>
                         <input id="agree" type="checkbox">
                         <label for="agree">I agree to the privacy policy and terms and conditions.</label>
                     </form>
                     <p class='footer_icons'>
                         <i class="fab fa-facebook-f"></i>
                         <i class="fab fa-instagram"></i>
                         <i class="fab fa-twitter"></i>
                         <i class="fab fa-pinterest"></i>
                         <i class="fab fa-youtube"></i>
                         <i class="fa fa-envelope"></i>
                     </p>
            </section>
        </div>
    </footer>
</body>
</html>